<template>
  <div class="form-setting-panel">
    <!-- start 标题 -->
    <form-title-setting
      :field="field"
      :mode="mode"
      :setting="setting"
      :disabled="isRelationTask"
      @input="updateForDom"
    ></form-title-setting>
    <!-- end 标题 -->

    <!-- start 描述信息 -->
    <form-describe-setting
      :field="field"
      :mode="mode"
      :disabled="isRelationTask"
      @input="updateForDom"
    ></form-describe-setting>
    <!-- end 描述信息 -->

    <!-- start 关联项字段 -->
    <div class="form-setting-group form-setting-item" v-if="!isRelationTask">
      <h4 class="form-item-title">{{$t('common.base.baseConcatField')}}</h4>
      <div class="form-setting-group"> 
        <el-select :disabled="!field.isNewField" class="form-setting-select" v-model="selectedRelatedField" @change="updateRelatedField">
          <el-option
            v-for="item in options"
            :key="item.fieldName"
            :label="item.displayName"
            :value="item.fieldName">
          </el-option>
        </el-select>
      </div>
    </div>
    <!-- end 关联项字段 -->

    <!-- start 校验 -->
    <div class="form-setting-group form-setting-item" v-if="isRelationTask">
      <h4 class="form-item-title">{{$t('common.base.check')}}</h4>
      <div class="form-item-box">
        <!-- 必填 -->
        <form-required-setting :field="field" @input="update"></form-required-setting>
      </div>
    </div>
    <!-- end 校验 -->

    <!-- start 字段权限 -->
    <div class="form-setting-group form-setting-item"  v-if="!isRelationTask">
      <h4 class="form-item-title">{{$t('common.base.fieldPermissions')}}</h4>
      <div class="form-item-box">
        <!-- 移动端列表展示 -->
        <mobile-show-setting v-if="isTaskMode || isOnlyEventMode || isOnlyProductMode" :is-event-mode="isEventMode" :field="field" :fields="fields" @input="update"></mobile-show-setting>
        <!-- 可见性 -->
        <form-visible-setting :field="field" @input="update"></form-visible-setting>
        <!-- 支持高级搜索 -->
        <form-search-setting :field="field" @input="update" v-if="!isTaskCardForm"></form-search-setting>
        <!-- 是否对客户可见 -->
        <form-visible-customer-setting :field="field" @input="update" v-if="isTaskModeForVisibleCustomer && isNotShowCustomerVisible"></form-visible-customer-setting>
      </div>
    </div>
    <!-- end 字段权限 -->
    
    <!-- start 其他设置 -->
    <div class="form-setting-group form-setting-item" v-if="allowPublicSet">
      <h4 class="form-item-title">{{$t('common.base.otherSet')}}</h4>
      <div class="form-item-box">
        <!-- 设为公用字段 -->
        <form-public-setting :field="field" @input="update"></form-public-setting>
      </div>
    </div>
    <!-- end 其他设置 -->
  </div>
</template>
<script>
import SettingMixin from '@src/component/form/mixin/setting'
import { settingProps } from '@src/component/form/components/props';
import { findComponentUpward } from '@src/util/assist';
/* enum */
import TableNameEnum from '@model/enum/TableNameEnum.ts';
import { TaskFieldNameMappingEnum } from '@model/enum/FieldMappingEnum.ts'
/* util */
import { isNotUndefined } from '@src/util/type';
/* version control mixin */
import { 
  VersionControlProductMixin, 
  VersionControlFormMixin,
  VersionControlOtherMixin,
  VersionControlTaskMixin
} from '@src/mixins/versionControlMixin'


export default {
  name: 'form-relation-setting',
  mixins: [
    SettingMixin,
    VersionControlProductMixin,
    VersionControlFormMixin,
    VersionControlOtherMixin,
    VersionControlTaskMixin
  ],
  props: settingProps,
  data() {
    return {
      selectedRelatedField: '', // 当前选择的关联项字段
      moduleMap: {
        'relationCustomer': TaskFieldNameMappingEnum.Customer, // 客户关联字段
        'relationProduct': TaskFieldNameMappingEnum.Product, // 产品关联字段
        'relationReplacementPart': TaskFieldNameMappingEnum.ReplacementPart, // 备件关联字段
        'relationServiceProvider': TaskFieldNameMappingEnum.ServiceProvider, // 服务商关联字段
        'relationTask': TaskFieldNameMappingEnum.RelationTask //工单表单关联字段
      }
    }
  },
  computed: {
     // 是否是工单表单关联字段
    isRelationTask() {
      return this.field.formType == 'relationTask'  
    },
    /**
    * @description 关联模块：客户或产品
    */
    module () {
      // return this.field.formType === 'relationCustomer' ? 'customer' : this.field.formType === 'relationProduct' ? 'product' : 'ReplacementPart';
      return this.moduleMap[this.field.formType]
    },
    /**
    * @description 关联项数据
    */
    options() {
      let $parent = findComponentUpward(this, 'form-design');
      let moduleOptionName = `${this.module}Fields`;
      
      // bugfix: 16543 事件改造把关联字段逻辑迁移至form-design组件中，导致未兼容到工单、产品自注册、客户附加组件表单（目前处理改动量最小，后面可以改造一下都使用form-design逻辑）
      let relationOptions = $parent.relationFieldOptions[moduleOptionName] || $parent.relationOptions[moduleOptionName];
      
      const fieldNameByVersionShowMap = {
        // 产品类型
        // type: this._isShowProductType,
        // 产品模板
        productTemplate: this._isShowProductTemplate,
        // 质保开始时间
        qualityInfoStartTime: this._isShowProductQuality,
        // 质保结束时间
        qualityInfoEndTime: this._isShowProductQuality,
        // 质保状态
        qualityInfoStatus: this._isShowProductQuality
      }
      
      relationOptions = relationOptions.filter(item => {
        
        const isShow = fieldNameByVersionShowMap[item?.fieldName]
        if (isNotUndefined(isShow)) {
          return isShow
        }
        
        return true;
        
      })
      
      return relationOptions
    },
    // 是否是附加组件表单
    isTaskCardForm() {
      return [ TableNameEnum.TaskCard, TableNameEnum.CustomerCard, TableNameEnum.ProductCard, TableNameEnum.ProductRegister ].indexOf(this.mode) > -1;
    },
    // 客户可见性：连接器不显示
    isNotShowCustomerVisible() {
      return !['connector', 'idcard'].includes(this.field?.setting?.formType)
    },
  },
  mounted() {
    let { fieldName } = this.field.setting || {};

    // 初始化当前选择的关联项字段
    if (fieldName) {
      this.selectedRelatedField = fieldName;
    } else {
      // 默认选中第一个
      this.selectedRelatedField = this.options[0].fieldName;
      this.updateRelatedField(this.selectedRelatedField);
    }
  },
  watch: {
    field(newValue) {
      let { fieldName } = newValue.setting || {};
      this.selectedRelatedField = fieldName;
    }
  },
  methods: {
    updateForDom(event) {
      let el = event.target;
      let prop = el.dataset.prop;
      let value = el.value;

      this.update(value, prop);
    },
    update(value, prop, isSetting = false){
      this.$emit('input', {value, prop, isSetting});
    },
    /**
    * @description 更新关联项
    */
    updateRelatedField(value) {
      const selectedField = this.options.filter(field => field.fieldName == value);

      if (selectedField.length) {
        const { fieldName, formType } = selectedField[0];

        this.field.setting = {
          module: this.module,
          fieldName,
          formType,
          dateType: selectedField[0]?.setting?.dateType,
          isMulti: selectedField[0]?.setting?.isMulti
        }
      }
    }
  }
}
</script>
